<template>
  <div class="popupbox-root">
    <div class="title-root">
      <div class="title">
        <span>{{ title }}</span>
      </div>
      <!-- <div class="button-close" @click="handleClose"></div> -->
      <div class="button-close">
        <div class="button-x">×</div>
      </div>
    </div>

    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script setup>
import { defineProps, onMounted } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
onMounted(() => {
  window.addEventListener('beforeunload', (e) => {
    // alert(222)
    console.log('ewewe-->', e)
  })
})
</script>
<style lang="scss" scoped>
.popupbox-root {
  background: linear-gradient(
    0deg,
    rgba(23, 89, 222, 0.7),
    rgba(18, 58, 138, 0.7)
  );
  box-shadow: 0px 2px 0px 0px #0d3688, 0px 3px 2px 0px #00417a;
  border-radius: 10px;

  .title-root {
    width: 100%;
    display: flex;
    height: 45px;
    position: relative;
    .title {
      width: 100%;
      height: 45px;
      background: url(~@@/images/screen/gis/item_box_title_bg.png) no-repeat;
      background-size: 243px 18px;
      background-origin: border-box;
      background-position: 21px 27px;
      font-size: 16px;
      font-family: hzgb;
      font-style: italic;
      color: #dbfff3;
      line-height: 45px;
      padding-left: 20px;
      letter-spacing: 1px;
    }
    .button-close {
      width: 17px;
      height: 17px;
      background: url(~@@/images/screen/gis/close_x.png) no-repeat center 100%;
      cursor: pointer;
      position: absolute;
      top: 14px;
      right: 17px;
      .button-x {
        opacity: 0;
      }
    }
  }

  .content {
    width: 100%;
    padding: 6px;
  }
}
</style>
